import React from 'react';
import { Form, Input, InputNumber, Button, Card, Row, Col } from 'antd';
import { useNavigate } from 'react-router-dom';

export default function BuildingCreate() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      // 生成唯一 key
      values.key = Date.now();
      navigate('/building-manage', { state: { newBuilding: values } });
    } catch (e) {}
  };

  return (
    <div style={{ background: '#f5f7fa', minHeight: '100vh', padding: 32 }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', background: '#fff', borderRadius: 8, boxShadow: '0 2px 8px rgba(0,0,0,0.04)', padding: 32, position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 24, borderBottom: '2px solid #eee', paddingBottom: 12 }}>
          <div style={{ width: 10, height: 24, background: '#4880ff', borderRadius: 2, marginRight: 12 }} />
          <span style={{ fontWeight: 700, fontSize: 22 }}>楼宇信息新增</span>
          <span style={{ position: 'absolute', right: 24, top: 32, fontSize: 28, cursor: 'pointer' }} onClick={() => navigate(-1)}>&#10005;</span>
        </div>
        <Form
          form={form}
          layout="vertical"
          style={{ marginBottom: 40 }}
        >
          <Card style={{ borderRadius: 12, marginBottom: 0, padding: 24 }} bodyStyle={{ padding: 0 }}>
            <Row gutter={32}>
              <Col span={12}>
                <Form.Item label="楼宇名称" name="name" rules={[{ required: true, message: '请输入楼宇名称' }]} required>
                  <Input placeholder="请输入楼宇名称" />
                </Form.Item>
                <Form.Item label="楼宇编号" name="code" rules={[{ required: true, message: '请输入楼宇编号' }]} required>
                  <Input placeholder="请输入楼宇编号" />
                </Form.Item>
                <Form.Item label="层数" name="floors" rules={[{ required: true, message: '请输入层数' }]} required>
                  <InputNumber placeholder="请输入层数" style={{ width: '100%' }} min={1} />
                </Form.Item>
                <Form.Item label="物业费（元/平/月）" name="fee" rules={[{ required: true, message: '请输入物业费' }]} required>
                  <InputNumber placeholder="请输入物业费" style={{ width: '100%' }} min={0} step={0.1} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="建筑面积（㎡）" name="area" rules={[{ required: true, message: '请输入建筑面积' }]} required>
                  <InputNumber placeholder="请输入建筑面积" style={{ width: '100%' }} min={0} />
                </Form.Item>
                <Form.Item label="在管面积（㎡）" name="managed" rules={[{ required: true, message: '请输入在管面积' }]} required>
                  <InputNumber placeholder="请输入在管面积" style={{ width: '100%' }} min={0} />
                </Form.Item>
                <Form.Item label="排序" name="order" rules={[{ required: true, message: '请输入排序' }]} required>
                  <InputNumber placeholder="请输入排序" style={{ width: '100%' }} min={1} />
                </Form.Item>
              </Col>
            </Row>
          </Card>
        </Form>
        <div style={{ textAlign: 'center', marginTop: 40 }}>
          <Button type="primary" style={{ width: 120, marginRight: 32 }} onClick={handleSave}>保存</Button>
          <Button style={{ width: 120 }} onClick={() => navigate(-1)}>取消</Button>
        </div>
      </div>
    </div>
  );
} 